{% block sw_flow_app_action_modal %}
<sw-modal
    class="sw-flow-app-action-modal"
    @modal-close="onClose"
>
    <template #modal-header>
        {% block sw_flow_app_action_modal_header %}
        <div class="sw-flow-app-action-modal__header">
            {{ actionLabel }}
            <span class="sw-flow-app-action-modal__app-badge">
                {{ appBadge }}
            </span>
        </div>
        {% endblock %}
    </template>

    {% block sw_flow_app_action_modal_content %}
    {% block sw_flow_app_action_modal_headcontent %}
    <div
        v-if="headline || paragraph"
        class="sw-flow-app-action-modal__headcontent"
    >
        {% block sw_flow_app_action_modal_headline %}
        <div
            v-if="headline"
            class="sw-flow-app-action-modal__headline"
        >
            {{ headline }}
        </div>
        {% endblock %}

        {% block sw_flow_app_action_modal_paragraph %}
        <div
            v-if="paragraph"
            class="sw-flow-app-action-modal__paragraph"
        >
            {{ paragraph }}
        </div>
        {% endblock %}
    </div>
    {% endblock %}
    <sw-form-field-renderer
        v-for="field in fields"
        :key="field.name"
        v-model:value="config[field.name]"
        :type="field.type"
        :config="getConfig(field)"
        :error="errors[field.name]"
        @update:value="onChange($event, field)"
    />
    {% endblock %}
    <template #modal-footer>
        {% block sw_flow_app_action_modal_footer_cancel_button %}
        <mt-button
            class="sw-flow-app-action-modal__cancel-button"
            size="small"
            variant="secondary"
            @click="onClose"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_flow_app_action_modal_footer_save_button %}
        <mt-button
            class="sw-flow-app-action-modal__save-button"
            variant="primary"
            size="small"
            @click="onSave"
        >
            {{ $tc('sw-flow.modals.buttonSaveAction') }}
        </mt-button>
        {% endblock %}
    </template>
</sw-modal>
{% endblock %}
